<script setup lang="ts">
  import { ref, provide } from 'vue';
  import IconVision from '/@/assets/login/vision.png';
  import IconStar from '/@/assets/login/star.svg';
  import IconLoginBack from '/@/assets/login/login_back.svg';
  import UserConnectWalletRegister from './UserConnectWalletRegister.vue';
  import UserConnectLogin from './UserConnectLogin.vue';
  import UserConnectEmailRegister from './UserConnectEmailRegister.vue';
  import UserConnectForgotPassword from './UserConnectForgotPassword.vue';
  import { UserConnectContext } from './context';

  type PageStatus = 'login' | 'wallet_register' | 'email_register' | 'forgot_password';
  const pageStatus = ref<PageStatus>('login');

  function jumpToEmailRegister() {
    pageStatus.value = 'email_register';
  }

  function jumpToLogin() {
    pageStatus.value = 'login';
  }

  function jumpToWalletRegister() {
    pageStatus.value = 'wallet_register';
  }

  function jumpToForgotPassword() {
    pageStatus.value = 'forgot_password';
  }

  provide(UserConnectContext, {
    actions: {
      jumpToEmailRegister,
      jumpToLogin,
      jumpToWalletRegister,
      jumpToForgotPassword,
    },
  });
</script>

<template>
  <div class="relative">
    <div class="absolute w-[260px] h-full bg-[#5F70FF] rounded-r-2xl overflow-hidden">
      <div class="absolute left-0 bottom-0 w-[260px] h-[410px] overflow-hidden">
        <img :src="IconStar" class="absolute z-1 left-0 bottom-0" />
        <img :src="IconVision" class="absolute left-0 top-0 z-2 max-w-none w-[320px]" />
      </div>
    </div>
    <div class="w-[560px] px-[80px] pt-[35px] pb-[88px] ml-[260px] bg-white rounded-2xl">
      <div class="h-[35px]">
        <img
          class="w-[28px] cursor-pointer"
          v-show="pageStatus !== 'login'"
          :src="IconLoginBack"
          @click="jumpToLogin"
        />
      </div>
      <template v-if="pageStatus === 'login'">
        <UserConnectLogin />
      </template>
      <template v-else-if="pageStatus === 'email_register'">
        <UserConnectEmailRegister />
      </template>
      <template v-else-if="pageStatus === 'wallet_register'">
        <UserConnectWalletRegister />
      </template>
      <template v-else-if="pageStatus === 'forgot_password'">
        <UserConnectForgotPassword />
      </template>
    </div>
  </div>
</template>
